<template>
    <div>
        <div>
            <h2>User</h2>
            <div>名字：{{ $store.state.user.username }}</div>
            <div>年龄：{{ $store.state.user.age }}</div>
            <div>描述：{{ $store.getters.descrption }}</div>
            <button @click="changeage">异步修改年龄+1</button>
            <button @click="changeAgeNum">异步修改年龄+5</button>
        </div>
        <hr />
        <!-- 命名空间 -->
        <div>
            <h2>User1</h2>
            <div>名字：{{ $store.state.user1.username }}</div>
            <div>年龄：{{ $store.state.user1.age }}</div>
            <div>描述：{{ $store.getters['user1/descrption'] }}</div>
            <button @click="changeage1">异步修改年龄+2</button>
            <button @click="changeAgeNum1">异步修改年龄+5</button>
        </div>
        <hr />
        <!-- 辅助函数 -->
        <div>
            <h2>User2</h2>
            <div>名字：{{ user2.username }}</div>
            <div>年龄：{{ user2.age }}</div>
            <div>描述：{{ $store.getters['user2/descrption'] }}</div>
            <div>描述 'user2',['descrption']： {{ descrption }}</div>
            <button @click="asyncSetAgeNum(100)">异步修改年龄+100 mapActions</button> |
            <button @click="changeage2">异步修改年龄+2</button> |
            <button @click="changeAgeNum2">异步修改年龄+5</button>
        </div>
        <hr />
        <!-- 辅助函数 -->
        <div>
            <h2>User3</h2>
            <div>名字：{{ user3.username }}</div>
            <div>年龄：{{ user3.age }}</div>
            <div>描述：{{ $store.getters['user3/des'] }}</div>
            <div>描述('user3',['des']) ：{{ des }}</div>
            <button @click="changeage3">异步修改年龄</button> |
            <button @click="changeusername3">异步修改名字</button> |
            <button @click="asyncsetName('大佬江哥')">异步修改年龄 mapActions</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    props: {
    },
    computed: {
        ...mapState(['user2', 'user3']),
        ...mapGetters('user2', ['descrption']),
        ...mapGetters('user3', ['des']),
    },
    methods: {
        changeage() {
            this.$store.dispatch('asyncSetAge')
        },
        changeAgeNum() {
            this.$store.dispatch('asyncSetAgeNum')
        },
        changeage1() {
            this.$store.dispatch('user1/asyncSetAgeNum', 2)
        },
        changeAgeNum1() {
            this.$store.dispatch('user1/asyncSetAgeNum', 5)
        },
        changeage2() {
            this.$store.dispatch('user2/asyncSetAgeNum', 2)
        },
        changeAgeNum2() {
            this.$store.dispatch('user2/asyncSetAgeNum', 5)
        },
        changeage3() {
            this.$store.dispatch('user3/asyncsetAge', 3)
        },
        changeusername3() {
            this.$store.dispatch('user3/asyncNameAdd', '江哥')
        },
        ...mapActions('user2', ['asyncSetAgeNum']),
        ...mapActions('user3', ['asyncsetName'])
    }
}
</script>
